<script lang="ts" setup>
import {onMounted, ref} from "vue";
import axios from "axios";

import {useToast} from 'vue-toast-notification';
import 'vue-toast-notification/dist/theme-sugar.css';

const $toast = useToast();//消息提示栏
const columns = ref([
  {name: 'contents', align: 'center', label: '反馈内容', field: 'contents', sortable: true},
  {name: 'inputTime', label: '反馈时间', field: 'inputTime', sortable: true},
  {name: 'status', label: '整改状态', field: 'status'},
  {name: 'handlingMeasures', label: '处理措施', field: 'handlingMeasures'},
  {name: 'updateTime', label: '处理时间', field: 'updateTime'}])
const isShowFreeback = ref(false)
const snowFreeback = () => {
  if (localStorage.getItem("patient-auth-token")) {
    const token = localStorage.getItem("patient-auth-token")
    axios.post("/api/auth/check/患者", {}, {  // 这里传递空对象作为请求体
      headers: {
        token: token  // 使用token作为请求头
      }
    }).then(res => {
      // console.log(res);
      const msg = res.data.message;
      if (res.data.success) {
        // 成功的处理逻辑
        localStorage.setItem("patient-auth-token", msg)
        isShowFreeback.value = true

      }
    })
  } else {
    $toast.open({
      message: '请先登录',
      type: 'warning',
      position: "bottom-right"
    })
  }
}
const content = ref('')
const  addFreeback = () => {
  if(content.value == ""){
    $toast.open({
      type: "warning",
      position: "bottom-right",
      message: '反馈内容不能为空'
    })
    return;
  }
  const data = {
    contents:content.value
  }
  axios.post('/api/freeback/add',data,{
    headers:{
      token:localStorage.getItem("patient-auth-token")
    }
  }).then(res=>{
    console.log(res);
    content.value = ''
    isShowFreeback.value = false
    if(res.data.success){
      $toast.open({
        type: "success",
        position: "bottom-right",
        message: '反馈成功'
      })
    }else{
      $toast.open({
        type: "error",
        position: "bottom-right",
        message: '反馈失败'
      })
    }
  })
}
const rows = ref([
])

const getFreeback = () => {
  axios.post("/api/freeback/list",{},{
    headers:{
      token:localStorage.getItem("patient-auth-token")
    }
  }).then(res=>{
    rows.value = res.data.message
  })
}
onMounted(()=>{
  getFreeback()
})
setInterval(()=>{
  getFreeback()
},3000)
</script>

<template>
  <div style="display: flex;flex-direction: column;width: 99vw;height: 90vh;">
    <div class="navbar-title cursor-pointer">
      “服务有感受，欢迎来吐槽——我们在意每一次体验。”
    </div>
    <div style="width: 100%;display: flex;justify-content: end;margin-top: -40px">
      <q-btn color="primary" style="width: 200px" @click="snowFreeback">
        <div class="ellipsis">
          立即反馈
        </div>
      </q-btn>
    </div>

    <q-table
        :columns="columns"
        :rows="rows"
        row-key="name"
        style="height: 80vh;"
        title="服务反馈"
    />
    <q-dialog v-model="isShowFreeback" persistent transition-hide="scale" transition-show="scale">
      <q-card style="width: 700px; max-width: 80vw;display: flex;flex-direction: column;">
        <q-card-section>
          <div class="text-h6">反馈内容</div>
        </q-card-section>
        <q-separator/>
        <div class="d-flex">
          <div style="margin: 20px;display: flex;align-items: center;width: 100%;justify-content: space-around">
            <q-input v-model="content" label="反馈内容" outlined style="width: 100%" type="textarea"/>
          </div>

        </div>
        <q-card-actions align="right">
          <q-btn v-close-popup color="primary" flat label="取消反馈"/>
          <q-btn color="primary" flat label="提交反馈" @click="addFreeback"/>
        </q-card-actions>
        <q-separator/>
      </q-card>


    </q-dialog>
  </div>
</template>

<style lang="scss" scoped>
.navbar-title {
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #008f8b;
}
</style>
